import React from 'react';
import classNames from 'classnames';

import {
  Row,
  Col,
  Panel
} from 'react-bootstrap';

class ConsumeRecord extends React.Component {

  constructor() {
    super();
  }

  formatScoreData(){

    let { profit,  ordertype, backpoint, valuecash, itemid} = this.props.record;
    
    let {consumeText="消耗积分", score = "0", profitClass = "" } = {};

    if(profit && profit.length){
      profit = parseFloat(profit).toFixed(2);
      let isHappy = profit > 0 ? true : false;
      let happyClass = {
          "text-danger": isHappy,
          "text-success": !isHappy
      };
      profit = profit + "%";

      //股票交易
      if(itemid === "8"){
        consumeText = "消耗积分";
      }else if(itemid === "10"){
        consumeText = "取消关注";
      }else if(itemid === "9"){
        consumeText = "股市文章";
      }else {
        consumeText = "消耗积分";
      }

      score = valuecash;

      profitClass = classNames( "record-profit", happyClass );
    }

    return {score, profit, consumeText, profitClass };
  }

  render(){

      let {record} = this.props;
      let {score, profit, consumeText, profitClass } = this.formatScoreData();

      return (
           record && record.stockcode!="" && record.valuecash!=""?
           <Panel className="record-item">
              <Row>
                <Col xs={3}>
                  <div className="border-right">
                    <p className="text-primary">{consumeText}</p>
                    <h2 className="text-danger">
                        {score}
                    </h2>
                  </div>
                </Col>
                <Col xs={8} xsOffset={1}>
                    <div>
                      <p className="text-primary">
                        {record.ordertype}
                        ：
                        {record.stockname}（{record.stockcode}）
                      </p>
                      <p className="text-primary">
                        {
                          record.stockprice===""?
                          `成本：-- 元`:
                          `成本：${parseFloat(record.stockprice).toFixed(2)}元`
                        }
                      </p>
                      <p className="text-primary">
                        仓位：{
                          parseFloat(record.position) > 0?
                          `${record.position}%`
                          : 
                          `—`
                        }
                      </p>
                      <p className={profitClass}>
                        {profit}
                      </p>
                  </div>
                </Col>
              </Row>
          </Panel>
          :
          null
      );
  }
}

export default ConsumeRecord;